<template>
	<view class="register-container">
		<view style="height: 40px;"></view>
		<view class="register-title">
			用户注册
		</view>

		<!-- 注册表单 -->
		<view class="register-form">
			<view class="form-item">
				<u-input
					v-model="registerForm.memberName"
					placeholder="请输入用户名"
					border="surround"
					:clearable="true"
					style="width: 100%;"
				></u-input>
			</view>
			<view class="form-item">
				<u-input
					v-model="registerForm.contact"
					placeholder="请输入手机号"
					border="surround"
					:clearable="true"
					type="number"
					maxlength="11"
					style="width: 100%;"
				></u-input>
			</view>
			<view class="form-item">
				<u-input
					v-model="registerForm.password"
					placeholder="请输入密码"
					border="surround"
					:clearable="true"
					:password="true"
					style="width: 100%;"
				></u-input>
			</view>
			<view class="form-item">
				<u-input
					v-model="registerForm.confirmPassword"
					placeholder="请确认密码"
					border="surround"
					:clearable="true"
					:password="true"
					style="width: 100%;"
				></u-input>
			</view>
		</view>

		<view style="height: 20px;"></view>
		<u-button type="success" shape="circle" size="large" style="width: 80%;" text="注册"
			@click="handleRegister" :loading="isRegistering"></u-button>
		<view style="height: 20px;"></view>
		<u-button type="default" shape="circle" size="large" color="#EDEDED" style="color: #000; width: 80%;"
			text="返回登录" @click="goBack"></u-button>

		<!-- 协议确认区域 -->
		<view class="agreement-container">
			<view class="agreement-item" @click="toggleAgree">
				<!-- 单选圆圈 -->
				<view class="radio-circle" :class="{checked: isAgreed}">
					<view class="checkmark" v-if="isAgreed">✓</view>
				</view>
				<view class="xieyi" style="display: flex; align-items: center; white-space: nowrap;">
					<text>阅读并同意</text>
					<text @click="navigateTo('privacy')" style="color: #FF6B35 ">《隐私协议》</text>
					<text @click="navigateTo('user')" style="color: #FF6B35 ">《用户协议》</text>
				</view>
			</view>
		</view>

		<!-- 提示弹窗 -->
		<u-modal :show="showAlert" title="提示" content="请先阅读并同意用户协议和隐私协议" :showCancelButton="true"
			@confirm="showAlert = false" @cancel="showAlert = false"></u-modal>

		<!-- 注册中加载弹窗 -->
		<view class="register-mask" v-if="showLoading">
			<view class="register-dialog">
				<view class="loading-ring"></view>
				<view style="color: white;font-size: 16px;">注册中...</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { post } from '@/config/request.js'

	export default {
		data() {
			return {
				registerForm: {
					memberName: '',
					contact: '',
					password: '',
					confirmPassword: ''
				},
				isAgreed: false,
				showAlert: false,
				showLoading: false,
				isRegistering: false
			}
		},
		methods: {
			toggleAgree() {
				this.isAgreed = !this.isAgreed
			},
			navigateTo(type) {
				// 根据类型跳转不同页面
				const urlMap = {
					privacy: '/pages/login/yinsixieyi',
					user: '/pages/login/user'
				};
				uni.navigateTo({
					url: urlMap[type]
				});
			},
			// 表单校验
			validateForm() {
				if (!this.registerForm.memberName.trim()) {
					uni.showToast({ title: '请输入用户名', icon: 'none' });
					return false;
				}
				if (!this.registerForm.contact.trim()) {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return false;
				}
				// 手机号格式验证
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(this.registerForm.contact)) {
					uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
					return false;
				}
				if (!this.registerForm.password.trim()) {
					uni.showToast({ title: '请输入密码', icon: 'none' });
					return false;
				}
				if (this.registerForm.password.length < 6) {
					uni.showToast({ title: '密码长度不能少于6位', icon: 'none' });
					return false;
				}
				if (this.registerForm.password !== this.registerForm.confirmPassword) {
					uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
					return false;
				}
				if (!this.isAgreed) {
					this.showAlert = true;
					return false;
				}
				return true;
			},
			async handleRegister() {
				if (!this.validateForm()) return;
				
				this.isRegistering = true;
				this.showLoading = true;
				
				try {
					await this.performRegister();
				} catch (error) {
					console.error('注册失败:', error);
					uni.showToast({ title: error.message || '注册失败，请重试', icon: 'none' });
				} finally {
					this.isRegistering = false;
					this.showLoading = false;
				}
			},
			async performRegister() {
				console.log('开始注册，参数:', {
					memberName: this.registerForm.memberName,
					contact: this.registerForm.contact,
					password: this.registerForm.password
				});
				
				const res = await post('/huiyuan/member/register', {
					memberName: this.registerForm.memberName,
					contact: this.registerForm.contact,
					password: this.registerForm.password
				});
				
				console.log('注册接口响应:', res);
				
				if (!res || res.code !== 200) {
					throw new Error(res?.msg || '注册失败');
				}
				
				uni.showToast({ title: '注册成功', icon: 'success', duration: 1500 });
				
				// 注册成功后返回登录页面
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			},
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.register-container {
		padding: 0 20px;
	}
	
	.register-title {
		font-size: 25px;
		font-weight: bold;
		color: #000;
		margin-bottom: 15px;
		padding: 20px;
		text-align: center;
	}
	
	.register-form {
		padding: 0 20px;
	}
	
	.form-item {
		margin-bottom: 15px;
	}

	.agreement-container {
		margin-top: 30px;
		padding: 5px 50px;
	}
	
	.agreement-item {
		display: flex;
		align-items: center;
	}
	
	.radio-circle {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		border: 1px solid #ddd;
		border-radius: 50%;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.2s;
	}

	.radio-circle.checked {
		background-color: #FF6B35;
		border-color: #FF6B35;
	}

	.checkmark {
		color: white;
		font-size: 14px;
		font-weight: bold;
	}

	/* 注册中弹窗样式 */
	.register-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}
	
	.register-dialog {
		width: 200px;
		height: 160px;
		background-color: #333;
		border-radius: 12px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}
	
	.loading-ring {
		width: 50px;
		height: 50px;
		border: 4px solid #ccc;
		border-top-color: #FF6B35;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20px;
	}
	
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>
